<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证diffinig算法</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../JsNew/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../JsNew/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../JsNew/babel.min.js"></script>
<!--引入prop-types库,用于将对props进行类型限制-->
<script type="text/javascript" src="../JsNew/prop-types.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js

class Time extends React.Component{

    state={
        date:new Date()
    }

    componentDidMount(){
        setInterval(()=>{
            this.setState({
                date:new Date()
            })
        },1000)
    }

    render(){
        // diffing算法会比较两次虚拟dom,对发生改变的dom节点进行更新,没有改变的dom节点保持不变
        // 所有每次时间改变时，span标签进行更新，但是h1和input标签保持不变
        return(
            <div>
                <h1>Hello</h1>
                <input type="text"/>
                <span>现在是:{this.state.date.toTimeString()}</span>
            </div>
        )
    }
}

ReactDOM.render(<Time/>,document.getElementById("container"))
</script>